<template>
  <div class="change-class body-bg">
    <div class="head-img-cont">
      <img class="head-img" :src="tempHeadImgPath || '/static/images/user.png'" alt=头像 @click="upLoadImg">
    </div>
    <ul class="infor-cont">
      <li class="items border-bottom" @click="editPhone">
        <label class="items-title required">手机</label>
        <span class="items-text">{{telphone || "15547257912"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
      </li>
      <li class="items border-bottom" data-title="姓名" data-type="text" data-maxlength="10" :data-value="name" @click="goInput($event)">
        <label class="items-title">真实姓名</label>
        <span class="items-text">{{name || "填写姓名"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tempHeadImgPath: "", // 上传图片的本地临时文件路径列表 (本地路径)
      name: "", // 姓名
      telphone: ""
    }
  },
  onShow() {
    this.name = this.$store.state.name;
    this.telphone = this.$store.state.telphone;
  },
  methods: {
    // 上传头像
    upLoadImg() {
      let that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          that.tempHeadImgPath = res.tempFilePaths;
        }
      })
    },
    // 去填写信息
    goInput(e) {
      wx.navigateTo({
        url: `/pages/inputCompenent/main?title=${e.currentTarget.dataset.title}&type=${e.currentTarget.dataset.type}&value=${e.currentTarget.dataset.value}&maxlength=${e.currentTarget.dataset.maxlength}`
      })
    },
    // 修改手机号
    editPhone() {
      wx.navigateTo({
        url: '/pages/editPhoneNumer/main'
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .head-img-cont{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .head-img{
      width: 65px;
      height: 65px;
      display: block;
      border-radius: 50%;
    }
  }
  .infor-cont{
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fff;
    .items{
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #333;
      &:last-child{
        border-bottom: 0;
      }
      .required{
        position: relative;
        &::after{
          content: "*";
          color: #FF0000;
          position: absolute;
          right: -10px;
          top: 2px;
        }
      }
      .items-text{
        display: flex;
        align-items: center;
        .van-icon{
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
